<template>
    <div class="all-backgrond"></div>
    <!-- 头部功能菜单 -->
    <!-- <div class="header-btns flex items-center justify-evenly">
        <el-input v-model="userSelect.iput" placeholder="歌曲ID/歌手名称/歌曲类型" clearable></el-input>
    </div> -->
    <div class="music-page">
        <div class="left-navigation">
            <div id="left-header-info">
                <svg @click="emits('child-click', '/snow-socket')" id="home-icons" t="1755095880116" class="icon"
                    viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10323" width="200"
                    height="200">
                    <path
                        d="M243.32384 972.8c-64 0-118.4-54.4-118.4-118.4v-243.2H83.32384c-35.2 0-67.2-22.4-76.8-54.4-12.8-32-6.4-67.2 16-92.8L425.72384 64C448.12384 41.6 480.12384 32 512.12384 32c32 0 60.8 12.8 83.2 32l403.2 403.2c28.8 25.6 35.2 60.8 16 96-12.8 32-44.8 51.2-80 51.2h-41.6v243.2c0 64-54.4 118.4-118.4 118.4H243.32384z m534.4-80c22.4 0 38.4-16 38.4-38.4v-272c0-25.6 22.4-48 48-48h73.6c3.2 0 3.2 0 6.4-6.4 0 0 0-6.4-3.2-9.6L537.72384 115.2c-6.4-6.4-16-9.6-28.8-9.6s-19.2 3.2-28.8 9.6L76.92384 521.6v3.2c-3.2 3.2-3.2 3.2 0 6.4 3.2 6.4 3.2 6.4 6.4 6.4h73.6c25.6 0 48 22.4 48 48v272c0 22.4 16 38.4 38.4 38.4h153.6v-204.8c0-41.6 35.2-73.6 80-73.6h70.4c44.8 0 80 35.2 80 73.6V896h150.4z m-230.4 0v-198.4h-70.4v198.4h70.4z"
                        p-id="10324"></path>
                </svg>
            </div>
            <div id="left-menus">
                <div id="menu-items" v-for="menuItem in leftNavigationmenus" :key="menuItem.key"
                    @click="activeMenuItem = menuItem.key.replace('snow-music-', '')">
                    <span>{{ menuItem.label }}</span>
                </div>
            </div>
            <!-- 底部工具栏 -->
            <div id="footer-tools">
                <div id="svg-icons">
                    <svg id="shrink-svg" t="1755095738326" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="9200" width="200" height="200">
                        <path
                            d="M877.714286 768c0 21.942857-14.628571 36.571429-36.571429 36.571429h-585.142857c-21.942857 0-36.571429-14.628571-36.571429-36.571429v-585.142857c0-21.942857 14.628571-36.571429 36.571429-36.571429h585.142857c21.942857 0 36.571429 14.628571 36.571429 36.571429v585.142857zM841.142857 73.142857h-585.142857C197.485714 73.142857 146.285714 124.342857 146.285714 182.857143v585.142857c0 58.514286 51.2 109.714286 109.714286 109.714286h585.142857c58.514286 0 109.714286-51.2 109.714286-109.714286v-585.142857c0-58.514286-51.2-109.714286-109.714286-109.714286z m-146.285714 365.714286h-292.571429c-21.942857 0-36.571429 14.628571-36.571428 36.571428s14.628571 36.571429 36.571428 36.571429h292.571429c21.942857 0 36.571429-14.628571 36.571428-36.571429S716.8 438.857143 694.857143 438.857143z"
                            p-id="9201"></path>
                    </svg>
                    <svg id="setting-svg" t="1755095435477" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6260" width="200" height="200">
                        <path
                            d="M812.6976 195.976533L936.021333 409.6a204.8 204.8 0 0 1 0 204.8L812.714667 828.023467a204.8 204.8 0 0 1-177.373867 102.4H388.676267a204.8 204.8 0 0 1-177.373867-102.4L87.978667 614.4a204.8 204.8 0 0 1 0-204.8l123.323733-213.623467a204.8 204.8 0 0 1 177.373867-102.4h246.647466a204.8 204.8 0 0 1 177.373867 102.4z m-59.118933 34.133334a136.533333 136.533333 0 0 0-118.254934-68.266667H388.676267a136.533333 136.533333 0 0 0-118.254934 68.266667L147.114667 443.733333a136.533333 136.533333 0 0 0 0 136.533334l123.323733 213.623466a136.533333 136.533333 0 0 0 118.254933 68.266667h246.647467a136.533333 136.533333 0 0 0 118.254933-68.266667L876.885333 580.266667a136.533333 136.533333 0 0 0 0-136.533334l-123.323733-213.623466z"
                            fill="#000000" p-id="6261"></path>
                        <path
                            d="M512 682.666667c94.2592 0 170.666667-76.407467 170.666667-170.666667s-76.407467-170.666667-170.666667-170.666667-170.666667 76.407467-170.666667 170.666667 76.407467 170.666667 170.666667 170.666667z m0-68.266667a102.4 102.4 0 1 1 0-204.8 102.4 102.4 0 0 1 0 204.8z"
                            fill="#000000" p-id="6262"></path>
                    </svg>
                    <svg id="clothes-svg" t="1755095615954" class="icon" viewBox="0 0 1070 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7379" width="200" height="200">
                        <path
                            d="M1049.6 339.781818l-69.818182-130.327273c-53.527273-100.072727-158.254545-162.909091-269.963636-162.90909-23.272727 0-41.890909 16.290909-46.545455 39.563636-9.309091 62.836364-62.836364 111.709091-125.672727 111.709091s-118.690909-46.545455-125.672727-111.709091c-2.327273-23.272727-23.272727-39.563636-46.545455-39.563636-116.363636 0-221.090909 62.836364-274.618182 162.90909l-69.818181 130.327273c-23.272727 44.218182-27.927273 95.418182-13.963637 144.290909 16.290909 48.872727 48.872727 86.109091 95.418182 109.381818l32.581818 16.29091V791.272727c0 102.4 83.781818 186.181818 186.181818 186.181818h425.890909c102.4 0 186.181818-83.781818 186.181819-186.181818v-181.527272l32.581818-16.29091c44.218182-23.272727 79.127273-60.509091 95.418182-109.381818 16.290909-48.872727 11.636364-100.072727-11.636364-144.290909z m-76.8 116.363637c-6.981818 23.272727-25.6 44.218182-46.545455 55.854545l-58.181818 30.254545c-16.290909 6.981818-25.6 23.272727-25.6 41.89091v209.454545c0 51.2-41.890909 93.090909-93.090909 93.090909H323.490909c-51.2 0-93.090909-41.890909-93.090909-93.090909v-209.454545c0-18.618182-9.309091-34.909091-25.6-41.89091L146.618182 512c-23.272727-11.636364-39.563636-30.254545-46.545455-53.527273-6.981818-23.272727-4.654545-48.872727 6.981818-72.145454l69.818182-130.327273c32.581818-58.181818 88.436364-100.072727 153.6-109.381818 30.254545 86.109091 114.036364 148.945455 209.454546 148.945454s179.2-60.509091 209.454545-148.945454c65.163636 11.636364 121.018182 51.2 153.6 109.381818l69.818182 130.327273c4.654545 20.945455 6.981818 46.545455 0 69.818182z"
                            fill="#2D3548" p-id="7380"></path>
                        <path
                            d="M628.363636 418.909091h-186.181818c-25.6 0-46.545455 20.945455-46.545454 46.545454s20.945455 46.545455 46.545454 46.545455h46.545455v139.636364c0 25.6 20.945455 46.545455 46.545454 46.545454s46.545455-20.945455 46.545455-46.545454v-139.636364h46.545454c25.6 0 46.545455-20.945455 46.545455-46.545455s-20.945455-46.545455-46.545455-46.545454z"
                            fill="#2D3548" p-id="7381"></path>
                    </svg>
                </div>
                <!-- <el-button @click="toggleFloatingBall">{{ isFloatingBallVisible ? '隐藏悬浮球' : '显示悬浮球' }}</el-button> -->
            </div>
        </div>
        <div class="container flex flex-col">
            <div class="header-dispose-btns flex">
                <!-- 返回按钮、前进按钮 -->
                <div id="basic-btns">
                    <svg id="previous-icons" t="1755096900393" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="12271" width="200" height="200">
                        <path
                            d="M946.823855 436.465708c25.23108 12.766359 56.03254 2.671399 68.800705-22.557875 12.77539-25.222049 2.682236-56.025315-22.548843-68.798899-244.424843-123.749514-539.712825-85.083774-744.048627 97.423865a1023522.637871 1023522.637871 0 0 0-99.179511-111.04276c-26.072778-29.199344-74.304256-15.865832-81.689888 22.574131L5.928012 677.931963c-5.884663 30.620839 18.98156 58.456487 50.072016 56.06144 109.610428-8.4802 219.211825-16.95137 328.813222-25.422539 39.021565-3.010968 57.692456-49.438033 31.610647-78.633764-33.061041-37.007631-66.11847-74.026098-99.177704-111.035535 172.891327-154.431764 422.751084-187.153236 629.577662-82.435857z"
                            fill="#231815" p-id="12272"></path>
                    </svg>
                    <svg id="next-icons" t="1755096912943" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="13242" width="200" height="200">
                        <path
                            d="M79.398558 436.464938c-25.231035 12.766337-56.032441 2.671394-68.800584-22.557835-12.775368-25.222004-2.682231-56.025216 22.548804-68.798778 244.424411-123.749296 539.711873-85.083624 744.047314 97.423694 33.059177-37.018403 66.118353-74.034999 99.179336-111.042564 26.072732-29.199292 74.302319-15.865804 81.689744 22.574091 20.740782 107.953934 41.486982 215.915094 62.229569 323.867222 5.884653 30.620785-18.981527 58.454577-50.071928 56.06134-109.610235-8.480185-219.211438-16.95134-328.812642-25.422494-39.021496-3.010963-57.692354-49.437946-31.610591-78.633625 33.060983-37.007565 66.116547-74.025968 99.175724-111.03534-172.88741-154.431492-422.746726-187.152906-629.574746-82.435711z"
                            fill="#231815" p-id="13243"></path>
                    </svg>
                </div>
                <!-- 过滤输入框 -->
                <div id="filter-input">
                    <el-input placeholder="输入音乐名称、歌手">
                        <template #suffix>
                            <el-icon>
                                <search />
                            </el-icon>
                        </template>
                    </el-input>
                </div>
                <!-- 关闭按钮 -->
                <div id="window-btns">
                    <svg id="window-minimize-icons" t="1755098689305" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="23762" width="200" height="200">
                        <path
                            d="M832 32H192A160.192 160.192 0 0 0 32 192v640A160.192 160.192 0 0 0 192 992h640a160.192 160.192 0 0 0 160-160V192A160.192 160.192 0 0 0 832 32zM928 832a96.128 96.128 0 0 1-96 96H192A96.128 96.128 0 0 1 96 832V192A96.128 96.128 0 0 1 192 96h640A96.128 96.128 0 0 1 928 192z"
                            p-id="23763"></path>
                        <path
                            d="M460.16 546.496A31.936 31.936 0 0 0 448 544H320a32 32 0 0 0 0 64h50.752l-137.408 137.344a32 32 0 1 0 45.312 45.248L416 653.248V704a32 32 0 0 0 64 0V576a32.128 32.128 0 0 0-19.84-29.568zM745.344 233.408L608 370.752V320a32 32 0 0 0-64 0v128a32.128 32.128 0 0 0 32 32h128a32 32 0 0 0 0-64h-50.752l137.408-137.408a32 32 0 1 0-45.248-45.184z"
                            p-id="23764"></path>
                    </svg>
                    <svg id="window-max-icons" t="1755098711956" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="24745" width="200" height="200">
                        <path
                            d="M981.333333 682.666667c-25.6 0-42.666667 17.066667-42.666666 42.666666v192c0 12.8-8.533333 21.333333-21.333334 21.333334H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h192c59.733333 0 106.666667-46.933333 106.666667-106.666667V725.333333c0-25.6-17.066667-42.666667-42.666667-42.666666zM298.666667 938.666667H106.666667c-12.8 0-21.333333-8.533333-21.333334-21.333334V725.333333c0-25.6-17.066667-42.666667-42.666666-42.666666s-42.666667 17.066667-42.666667 42.666666v192C0 977.066667 46.933333 1024 106.666667 1024H298.666667c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666zM917.333333 0H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h192c12.8 0 21.333333 8.533333 21.333334 21.333334V298.666667c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666V106.666667C1024 46.933333 977.066667 0 917.333333 0zM42.666667 341.333333c25.6 0 42.666667-17.066667 42.666666-42.666666V106.666667c0-12.8 8.533333-21.333333 21.333334-21.333334H298.666667c25.6 0 42.666667-17.066667 42.666666-42.666666s-17.066667-42.666667-42.666666-42.666667H106.666667C46.933333 0 0 46.933333 0 106.666667V298.666667c0 25.6 17.066667 42.666667 42.666667 42.666666z"
                            fill="#221E1F" p-id="24746"></path>
                        <path
                            d="M183.466667 277.333333v469.333334c0 51.2 42.666667 98.133333 98.133333 98.133333h469.333333c51.2 0 98.133333-42.666667 98.133334-98.133333v-469.333334c0-51.2-42.666667-98.133333-98.133334-98.133333h-469.333333c-55.466667 4.266667-98.133333 46.933333-98.133333 98.133333z m597.333333 0v469.333334c0 17.066667-12.8 34.133333-34.133333 34.133333h-469.333334c-17.066667 0-34.133333-12.8-34.133333-34.133333v-469.333334c0-17.066667 12.8-34.133333 34.133333-34.133333h469.333334c17.066667 4.266667 34.133333 17.066667 34.133333 34.133333z"
                            fill="#221E1F" p-id="24747"></path>
                    </svg>
                    <svg id="window-close-icons" t="1755098868639" class="icon" viewBox="0 0 1025 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="27511" width="200" height="200">
                        <path
                            d="M564.413466 511.963065l129.432465 129.432465a36.614559 36.614559 0 1 1-51.8096 51.8096L512.603866 563.772665 383.171402 693.20513a36.614559 36.614559 0 1 1-51.809601-51.8096l129.524001-129.432465-129.524001-129.432464a36.614559 36.614559 0 0 1 51.809601-51.809601l129.432464 129.524001 129.432465-129.524001a36.614559 36.614559 0 1 1 51.8096 51.809601z m-414.29373 362.48413a512.60382 512.60382 0 1 1 724.96826 0 514.068402 514.068402 0 0 1-724.96826 0zM202.020873 822.637594A439.374703 439.374703 0 1 0 202.020873 201.380072a440.656212 440.656212 0 0 0 0 621.257522z"
                            fill="" p-id="27512"></path>
                    </svg>
                </div>
            </div>
            <div id="main-container">
                <!-- 音乐列表 -->
                <div class="music-list" v-if="activeMenuItem === 'list'">
                    <!-- 顶部标题 -->
                    <div class="header-title">
                        <h4>歌曲</h4>
                        <h4>歌手</h4>
                    </div>
                    <div class="list">
                        <n-scrollbar style="max-height: 617.5px;">
                            <div class="music-item flex" v-for="music in music_store.musicList" :key="music.music_key"
                                @mouseenter="music.showExtra = true" @mouseleave="music.showExtra = false"
                                v-if="music_store.musicList.length > 0">
                                <!-- 歌曲基本信息和操作按钮 -->
                                <div id="songName" class="flex">
                                    <svg id="music-add-like-icons" t="1755239694034" class="icon"
                                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                        p-id="4922" width="200" height="200"
                                        @click="addLikeMusic(music.music_key, music.music_name, music.singer)">
                                        <path
                                            d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z"
                                            fill="#000000" p-id="4923"></path>
                                    </svg>
                                    <span>{{ music.music_name }}</span>
                                </div>
                                <!-- 额外内容 -->
                                <div v-show="music.showExtra" class="extra-content">
                                    <svg id="play-music-icons" t="1755137319341" class="icon" viewBox="0 0 1024 1024"
                                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14047" width="200"
                                        height="200" @click="playMusic(music.music_key)">
                                        <path
                                            d="M377.971959 333.319481 690.656471 511.932462 377.971959 690.678472 377.971959 333.319481zM958.70846 243.88252l0 536.102954c0 98.730629-79.971379 178.744987-178.615027 178.744987L243.903497 958.730461c-98.642624 0-178.61298-80.013335-178.61298-178.744987L65.290517 243.88252c0-98.644671 79.969333-178.615027 178.61298-178.615027l536.190959 0C878.73708 65.267493 958.70846 145.236825 958.70846 243.88252zM869.401458 288.643979c0-74.080206-59.989279-134.069485-134.069485-134.069485L288.667004 154.574494c-74.082252 0-134.115534 59.989279-134.115534 134.069485L154.55147 735.309972c0 74.03825 60.033281 134.113487 134.115534 134.113487l446.664969 0c74.080206 0 134.069485-60.075237 134.069485-134.113487L869.401458 288.643979z"
                                            p-id="14048"></path>
                                    </svg>
                                    <svg id="more-music-icons" t="1755137338425" class="icon" viewBox="0 0 1024 1024"
                                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15033" width="200"
                                        height="200" @click="moreMusicInfo(music)">
                                        <path
                                            d="M791.8 925.9H232.7C159 925.9 99.1 866 99.1 792.4V231.7C99.1 158 159 98.1 232.7 98.1h559.1c73.7 0 133.6 59.9 133.6 133.6v560.7c0 73.6-59.9 133.5-133.6 133.5zM232.7 187.6c-24.3 0-44.1 19.8-44.1 44.1v560.7c0 24.3 19.8 44.1 44.1 44.1h559.1c24.3 0 44.1-19.8 44.1-44.1V231.7c0-24.3-19.8-44.1-44.1-44.1H232.7z"
                                            fill="#333333" p-id="15034"></path>
                                        <path
                                            d="M674.9 550.4H353.6c-24.7 0-44.7-20-44.7-44.7s20-44.7 44.7-44.7h321.3c24.7 0 44.7 20 44.7 44.7s-20 44.7-44.7 44.7z"
                                            fill="#333333" p-id="15035"></path>
                                        <path
                                            d="M514.2 711c-24.7 0-44.7-20-44.7-44.7V345c0-24.7 20-44.7 44.7-44.7s44.7 20 44.7 44.7v321.3c0.1 24.7-20 44.7-44.7 44.7z"
                                            fill="#333333" p-id="15036"></path>
                                    </svg>
                                </div>
                                <div id="singer">
                                    <span>{{ music.singer }}</span>
                                </div>
                            </div>
                            <n-empty v-else description="音乐加载失败？点击按钮试试">
                                <template #extra>
                                    <n-button size="small" @click="getMusicInfoList">点击刷新</n-button>
                                </template>
                            </n-empty>
                        </n-scrollbar>
                    </div>
                </div>
                <!-- 喜欢列表 -->
                <div class="like-music-list" v-else-if="activeMenuItem === 'user-like'">
                    <!-- 标题 -->
                    <div class="title">
                        <!-- <h4>控制</h4> -->
                        <h4>歌曲</h4>
                        <h4>歌手</h4>
                    </div>
                    <n-scrollbar style="max-height: 530px;">
                        <div id="list-items" v-if="musicStore().likeMusicList.length > 0"
                            v-for="likeItem in musicStore().likeMusicList" :key="likeItem.music_key"
                            @mouseenter="likeItem.showExtra = true" @mouseleave="likeItem.showExtra = false">
                            <!-- 基本信息 -->
                            <div id="basic-info" class="grid-container">
                                <div class="item-1" style="display: flex;">
                                    <p>{{ likeItem.music_name }}</p>
                                    <div class="svgs" v-show="likeItem.showExtra">
                                        <svg id="like-music-dislike-icons" t="1755257910978" class="icon"
                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                            p-id="9876" width="200" height="200">
                                            <path
                                                d="M512 896h-6.4C356.266667 853.333333 64 633.6 64 384 64 243.2 179.2 128 320 128c40.533333 0 81.066667 10.666667 117.333333 27.733333 8.533333 4.266667 12.8 12.8 10.666667 23.466667l-19.2 108.8 179.2 100.266667c6.4 4.266667 10.666667 8.533333 10.666667 17.066666s-2.133333 12.8-6.4 19.2l-136.533334 117.333334 55.466667 91.733333c6.4 10.666667 2.133333 23.466667-6.4 29.866667-10.666667 6.4-23.466667 2.133333-29.866667-6.4l-64-106.666667c-6.4-8.533333-4.266667-21.333333 4.266667-27.733333l125.866667-108.8-164.266667-91.733334c-8.533333-4.266667-12.8-12.8-10.666667-21.333333l19.2-106.666667C377.6 177.066667 349.866667 170.666667 320 170.666667 202.666667 170.666667 106.666667 266.666667 106.666667 384c0 215.466667 258.133333 422.4 405.333333 469.333333 147.2-44.8 405.333333-251.733333 405.333333-469.333333 0-117.333333-96-213.333333-213.333333-213.333333-34.133333 0-66.133333 8.533333-96 23.466666-10.666667 6.4-23.466667 2.133333-27.733333-8.533333-6.4-10.666667-2.133333-23.466667 8.533333-27.733333C622.933333 136.533333 663.466667 128 704 128c140.8 0 256 115.2 256 256 0 249.6-292.266667 469.333333-441.6 512H512z"
                                                fill="#333333" p-id="9877"></path>
                                        </svg>
                                        <svg id="like-music-play-icons" @click="playMusic(likeItem.music_key)"
                                            t="1755257711192" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="6956" width="200" height="200">
                                            <path
                                                d="M731.8528 487.2704l-191.4368-110.5408c-31.1296-17.9712-68.352-17.9712-99.4816 0s-49.7664 50.176-49.7664 86.1696v221.0816c0 35.9936 18.5856 68.1984 49.7664 86.1696 15.5648 9.0112 32.6656 13.4656 49.7664 13.4656s34.1504-4.5056 49.7664-13.4656l191.4368-110.5408c31.1296-17.9712 49.7664-50.176 49.7664-86.1696-0.0512-35.9424-18.6368-68.1472-49.8176-86.1696z"
                                                fill="#FFE6D8" p-id="6957"></path>
                                            <path
                                                d="M440.9344 376.7296c-31.1296 17.9712-49.7664 50.176-49.7664 86.1696v221.0816c0 20.7872 6.2464 40.2944 17.4592 56.5248 9.9328 3.2256 20.1728 4.9152 30.464 4.9152 17.1008 0 34.1504-4.5056 49.7664-13.4656l191.4368-110.5408c31.1296-17.9712 49.7664-50.176 49.7664-86.1696 0-22.6816-7.424-43.8784-20.6848-60.928l-168.96-97.536c-31.1808-18.0224-68.352-18.0224-99.4816-0.0512z"
                                                fill="#FED9C4" p-id="6958"></path>
                                            <path
                                                d="M440.9344 376.7296c-31.1296 17.9712-49.7664 50.176-49.7664 86.1696v221.0816c0 7.8848 0.9216 15.5648 2.6624 22.9888 14.9504-0.9728 29.7984-5.376 43.4688-13.2608l191.4368-110.5408c31.1296-17.9712 49.7664-50.176 49.7664-86.1696 0-16.9984-4.1984-33.1776-11.8784-47.4112l-126.208-72.8576c-31.1808-17.9712-68.352-17.9712-99.4816 0z"
                                                fill="#FEC3A6" p-id="6959"></path>
                                            <path
                                                d="M440.9344 376.7296c-31.1296 17.9712-49.7664 50.176-49.7664 86.1696v189.44l186.0096-107.4176c31.1296-17.9712 49.7664-50.176 49.7664-86.1696 0-12.5952-2.304-24.6784-6.6048-35.8912l-79.9232-46.1312c-31.1808-17.9712-68.352-17.9712-99.4816 0z"
                                                fill="#FFB392" p-id="6960"></path>
                                            <path
                                                d="M440.9344 376.7296c-31.1296 17.9712-49.7664 50.176-49.7664 86.1696v121.4464l134.4512-77.6192c31.1296-17.9712 49.7664-50.176 49.7664-86.1696 0-8.7552-1.1264-17.3056-3.2256-25.4976l-31.6928-18.3296c-31.232-17.9712-68.4032-17.9712-99.5328 0z"
                                                fill="#FE966C" p-id="6961"></path>
                                            <path
                                                d="M440.9344 376.7296c-31.1296 17.9712-49.7664 50.176-49.7664 86.1696v53.4528l82.8928-47.872c31.1296-17.9712 49.7664-50.176 49.7664-86.1696 0-4.608-0.3072-9.1136-0.9216-13.568-26.9824-9.3696-56.4736-6.7072-81.9712 7.9872z"
                                                fill="#FF7B4C" p-id="6962"></path>
                                            <path
                                                d="M729.9584 927.0784H295.936c-109.9776 0-199.4752-89.4976-199.4752-199.4752V293.5296c0-109.9776 89.4976-199.4752 199.4752-199.4752h434.0224c109.9776 0 199.4752 89.4976 199.4752 199.4752v434.0224c0 110.0288-89.4976 199.5264-199.4752 199.5264zM295.936 175.9744c-64.8192 0-117.5552 52.736-117.5552 117.5552v434.0224c0 64.8192 52.736 117.5552 117.5552 117.5552h434.0224c64.8192 0 117.5552-52.736 117.5552-117.5552V293.5296c0-64.8192-52.736-117.5552-117.5552-117.5552H295.936z"
                                                fill="#373E51" p-id="6963"></path>
                                            <path
                                                d="M432.9472 696.5248c-14.2336 0-28.416-3.7376-41.3696-11.2128-25.9072-14.9504-41.3696-41.728-41.3696-71.6288V407.4496c0-29.9008 15.4624-56.6784 41.3696-71.6288 25.9072-14.9504 56.832-14.9504 82.7392 0l178.5856 103.1168c25.9072 14.9504 41.3696 41.728 41.3696 71.6288s-15.4624 56.6784-41.3696 71.6288l-178.5856 103.1168c-12.9536 7.4752-27.1872 11.2128-41.3696 11.2128z m0.0512-289.8432c-0.4096 0-0.768 0.2048-0.8704 0.3584v206.592c0.1536 0.5632 0.6656 0.8704 0.8704 0.8704l178.944-103.2704c0.4096-0.4096 0.4096-0.9728 0.3072-1.1776l20.1728-35.6864-20.48 35.4816-178.5856-103.1168c-0.1536 0-0.256-0.0512-0.3584-0.0512z"
                                                fill="#373E51" p-id="6964"></path>
                                        </svg>
                                        <svg id="like-music-mv-icons" t="1755257851924" class="icon"
                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                            p-id="8897" width="200" height="200">
                                            <path
                                                d="M825.6 153.6H198.4C124.5 153.6 64 214.1 64 288v448c0 73.9 60.5 134.4 134.4 134.4h627.2c73.9 0 134.4-60.5 134.4-134.4V288c0-73.9-60.5-134.4-134.4-134.4z m-138.2 44.8l112 112H706l-112-112h93.4z m-156.8 0l112 112H526.7l-112-112h115.9z m-179.2 0l112 112H347.5l-112-112h115.9zM108.8 288c0-41.4 28.4-76.1 66.7-86.3l108.7 108.7H108.8V288z m806.4 448c0 49.4-40.2 89.6-89.6 89.6H198.4c-49.4 0-89.6-40.2-89.6-89.6V355.2h806.4V736z m0-425.6h-52.5l-112-112h74.9c49.4 0 89.6 40.2 89.6 89.6v22.4z"
                                                p-id="8898"></path>
                                            <path
                                                d="M454 687.2l149.3-77.6c27.5-13.8 27.5-53 0-66.8L468 472.2c-31.2-15.6-68 7.1-68 42v139.6c0 27.8 29.2 45.8 54 33.4zM444.8 512l134.4 67.2-134.4 67.2V512z"
                                                p-id="8899"></path>
                                        </svg>
                                    </div>
                                </div>
                                <p class="item-2">{{ likeItem.singer }}</p>
                            </div>
                        </div>
                        <n-empty v-else description="还没有喜欢的音乐哦，前去添加"></n-empty>
                    </n-scrollbar>
                </div>
                <!-- 历史播放记录 -->
                <div class="play-history-music" v-else-if="activeMenuItem === 'play-history'">
                    <div class="title">
                        <h4>歌曲</h4>
                        <h4>歌手</h4>
                    </div>
                    <n-scrollbar>
                        <div id="history-items" v-if="music_store.storageMusicHistoryPlay.length > 0"
                            v-for="historyMusic in music_store.storageMusicHistoryPlay" :key="historyMusic.music_key"
                            @mouseenter="historyMusic.showExtra = true" @mouseleave="historyMusic.showExtra = false">
                            <div id="basic-info" class="grid-container">
                                <div id="item-1" style="display: flex;">
                                    <p>{{ historyMusic.music_name }}</p>
                                    <div class="svgs" v-show="historyMusic.showExtra">
                                        <svg id="like-music-dislike-icons" t="1755257910978" class="icon"
                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                            p-id="9876" width="200" height="200">
                                            <path
                                                d="M512 896h-6.4C356.266667 853.333333 64 633.6 64 384 64 243.2 179.2 128 320 128c40.533333 0 81.066667 10.666667 117.333333 27.733333 8.533333 4.266667 12.8 12.8 10.666667 23.466667l-19.2 108.8 179.2 100.266667c6.4 4.266667 10.666667 8.533333 10.666667 17.066666s-2.133333 12.8-6.4 19.2l-136.533334 117.333334 55.466667 91.733333c6.4 10.666667 2.133333 23.466667-6.4 29.866667-10.666667 6.4-23.466667 2.133333-29.866667-6.4l-64-106.666667c-6.4-8.533333-4.266667-21.333333 4.266667-27.733333l125.866667-108.8-164.266667-91.733334c-8.533333-4.266667-12.8-12.8-10.666667-21.333333l19.2-106.666667C377.6 177.066667 349.866667 170.666667 320 170.666667 202.666667 170.666667 106.666667 266.666667 106.666667 384c0 215.466667 258.133333 422.4 405.333333 469.333333 147.2-44.8 405.333333-251.733333 405.333333-469.333333 0-117.333333-96-213.333333-213.333333-213.333333-34.133333 0-66.133333 8.533333-96 23.466666-10.666667 6.4-23.466667 2.133333-27.733333-8.533333-6.4-10.666667-2.133333-23.466667 8.533333-27.733333C622.933333 136.533333 663.466667 128 704 128c140.8 0 256 115.2 256 256 0 249.6-292.266667 469.333333-441.6 512H512z"
                                                fill="#333333" p-id="9877"></path>
                                        </svg>
                                        <svg id="like-music-play-icons" @click="playMusic(historyMusic.music_key)"
                                            t="1755257711192" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="6956" width="200" height="200">
                                            <path
                                                d="M731.8528 487.2704l-191.4368-110.5408c-31.1296-17.9712-68.352-17.9712-99.4816 0s-49.7664 50.176-49.7664 86.1696v221.0816c0 35.9936 18.5856 68.1984 49.7664 86.1696 15.5648 9.0112 32.6656 13.4656 49.7664 13.4656s34.1504-4.5056 49.7664-13.4656l191.4368-110.5408c31.1296-17.9712 49.7664-50.176 49.7664-86.1696-0.0512-35.9424-18.6368-68.1472-49.8176-86.1696z"
                                                fill="#FFE6D8" p-id="6957"></path>
                                            <path
                                                d="M440.9344 376.7296c-31.1296 17.9712-49.7664 50.176-49.7664 86.1696v221.0816c0 20.7872 6.2464 40.2944 17.4592 56.5248 9.9328 3.2256 20.1728 4.9152 30.464 4.9152 17.1008 0 34.1504-4.5056 49.7664-13.4656l191.4368-110.5408c31.1296-17.9712 49.7664-50.176 49.7664-86.1696 0-22.6816-7.424-43.8784-20.6848-60.928l-168.96-97.536c-31.1808-18.0224-68.352-18.0224-99.4816-0.0512z"
                                                fill="#FED9C4" p-id="6958"></path>
                                            <path
                                                d="M440.9344 376.7296c-31.1296 17.9712-49.7664 50.176-49.7664 86.1696v221.0816c0 7.8848 0.9216 15.5648 2.6624 22.9888 14.9504-0.9728 29.7984-5.376 43.4688-13.2608l191.4368-110.5408c31.1296-17.9712 49.7664-50.176 49.7664-86.1696 0-16.9984-4.1984-33.1776-11.8784-47.4112l-126.208-72.8576c-31.1808-17.9712-68.352-17.9712-99.4816 0z"
                                                fill="#FEC3A6" p-id="6959"></path>
                                            <path
                                                d="M440.9344 376.7296c-31.1296 17.9712-49.7664 50.176-49.7664 86.1696v189.44l186.0096-107.4176c31.1296-17.9712 49.7664-50.176 49.7664-86.1696 0-12.5952-2.304-24.6784-6.6048-35.8912l-79.9232-46.1312c-31.1808-17.9712-68.352-17.9712-99.4816 0z"
                                                fill="#FFB392" p-id="6960"></path>
                                            <path
                                                d="M440.9344 376.7296c-31.1296 17.9712-49.7664 50.176-49.7664 86.1696v121.4464l134.4512-77.6192c31.1296-17.9712 49.7664-50.176 49.7664-86.1696 0-8.7552-1.1264-17.3056-3.2256-25.4976l-31.6928-18.3296c-31.232-17.9712-68.4032-17.9712-99.5328 0z"
                                                fill="#FE966C" p-id="6961"></path>
                                            <path
                                                d="M440.9344 376.7296c-31.1296 17.9712-49.7664 50.176-49.7664 86.1696v53.4528l82.8928-47.872c31.1296-17.9712 49.7664-50.176 49.7664-86.1696 0-4.608-0.3072-9.1136-0.9216-13.568-26.9824-9.3696-56.4736-6.7072-81.9712 7.9872z"
                                                fill="#FF7B4C" p-id="6962"></path>
                                            <path
                                                d="M729.9584 927.0784H295.936c-109.9776 0-199.4752-89.4976-199.4752-199.4752V293.5296c0-109.9776 89.4976-199.4752 199.4752-199.4752h434.0224c109.9776 0 199.4752 89.4976 199.4752 199.4752v434.0224c0 110.0288-89.4976 199.5264-199.4752 199.5264zM295.936 175.9744c-64.8192 0-117.5552 52.736-117.5552 117.5552v434.0224c0 64.8192 52.736 117.5552 117.5552 117.5552h434.0224c64.8192 0 117.5552-52.736 117.5552-117.5552V293.5296c0-64.8192-52.736-117.5552-117.5552-117.5552H295.936z"
                                                fill="#373E51" p-id="6963"></path>
                                            <path
                                                d="M432.9472 696.5248c-14.2336 0-28.416-3.7376-41.3696-11.2128-25.9072-14.9504-41.3696-41.728-41.3696-71.6288V407.4496c0-29.9008 15.4624-56.6784 41.3696-71.6288 25.9072-14.9504 56.832-14.9504 82.7392 0l178.5856 103.1168c25.9072 14.9504 41.3696 41.728 41.3696 71.6288s-15.4624 56.6784-41.3696 71.6288l-178.5856 103.1168c-12.9536 7.4752-27.1872 11.2128-41.3696 11.2128z m0.0512-289.8432c-0.4096 0-0.768 0.2048-0.8704 0.3584v206.592c0.1536 0.5632 0.6656 0.8704 0.8704 0.8704l178.944-103.2704c0.4096-0.4096 0.4096-0.9728 0.3072-1.1776l20.1728-35.6864-20.48 35.4816-178.5856-103.1168c-0.1536 0-0.256-0.0512-0.3584-0.0512z"
                                                fill="#373E51" p-id="6964"></path>
                                        </svg>
                                        <svg id="like-music-mv-icons" t="1755257851924" class="icon"
                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                            p-id="8897" width="200" height="200">
                                            <path
                                                d="M825.6 153.6H198.4C124.5 153.6 64 214.1 64 288v448c0 73.9 60.5 134.4 134.4 134.4h627.2c73.9 0 134.4-60.5 134.4-134.4V288c0-73.9-60.5-134.4-134.4-134.4z m-138.2 44.8l112 112H706l-112-112h93.4z m-156.8 0l112 112H526.7l-112-112h115.9z m-179.2 0l112 112H347.5l-112-112h115.9zM108.8 288c0-41.4 28.4-76.1 66.7-86.3l108.7 108.7H108.8V288z m806.4 448c0 49.4-40.2 89.6-89.6 89.6H198.4c-49.4 0-89.6-40.2-89.6-89.6V355.2h806.4V736z m0-425.6h-52.5l-112-112h74.9c49.4 0 89.6 40.2 89.6 89.6v22.4z"
                                                p-id="8898"></path>
                                            <path
                                                d="M454 687.2l149.3-77.6c27.5-13.8 27.5-53 0-66.8L468 472.2c-31.2-15.6-68 7.1-68 42v139.6c0 27.8 29.2 45.8 54 33.4zM444.8 512l134.4 67.2-134.4 67.2V512z"
                                                p-id="8899"></path>
                                        </svg>
                                    </div>
                                </div>
                                <p id="item2">{{ historyMusic.singer }}</p>
                            </div>
                        </div>
                        <n-empty v-else description="还没有播放音乐记录">
                            <template #extra>
                                <n-button size="small" @click="activeMenuItem = 'list'">点击去播放吧</n-button>
                            </template>
                        </n-empty>
                    </n-scrollbar>
                </div>
                <!-- 音乐乐官 -->
                <div class="music-hall" v-else-if="activeMenuItem === 'hall'">
                    <h1>音乐乐馆</h1>
                </div>
                <!-- 音乐歌单 -->
                <div class="music-playlist" v-else-if="activeMenuItem === 'playlist'">
                    <h1>音乐歌单</h1>
                </div>
            </div>
            <!-- 底部控制栏 -->
            <div class="footer-dispose-btns flex items-center justify-evenly">
                <!-- 歌曲基本信息 -->
                <div class="music-basic-info">
                    <span>歌曲名称111111111111111111</span>
                </div>
                <!-- 控制歌曲（上一首、下一首、播放、暂停、进度条） -->
                <div class="control-btns">
                    <div id="btns">
                        <svg id="previous-music-icons" t="1755128984762" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11978" width="200" height="200"
                            @click="playPreviousMusic">
                            <path
                                d="M860.16 92.16A71.68 71.68 0 0 1 931.84 163.84v696.32a71.68 71.68 0 0 1-71.68 71.68H163.84A71.68 71.68 0 0 1 92.16 860.16V163.84A71.68 71.68 0 0 1 163.84 92.16h696.32M860.16 40.96H163.84a122.88 122.88 0 0 0-122.88 122.88v696.32a122.88 122.88 0 0 0 122.88 122.88h696.32a122.88 122.88 0 0 0 122.88-122.88V163.84a122.88 122.88 0 0 0-122.88-122.88z"
                                fill="none" p-id="11979" data-spm-anchor-id="a313x.search_index.0.i18.23e83a81Zzl9kG"
                                class="selected">
                            </path>
                            <path
                                d="M674.4064 338.5344A30.72 30.72 0 0 1 705.3312 368.64v286.72a30.72 30.72 0 0 1-30.9248 30.9248 30.3104 30.3104 0 0 1-17.6128-5.9392l-200.0896-143.36a30.72 30.72 0 0 1 0-49.9712l200.0896-143.36a30.3104 30.3104 0 0 1 17.6128-5.9392m0-51.2a81.92 81.92 0 0 0-47.3088 15.36l-200.0896 143.36a81.92 81.92 0 0 0 0 133.5296l200.0896 143.36a81.92 81.92 0 0 0 47.3088 15.36 81.92 81.92 0 0 0 81.92-81.92V368.64a81.92 81.92 0 0 0-81.92-81.92zM308.4288 714.9568a25.6 25.6 0 0 1-25.6-25.6V334.6432a25.6 25.6 0 1 1 51.2 0v354.7136a25.6 25.6 0 0 1-25.6 25.6z"
                                fill="#282828" p-id="11980"></path>
                        </svg>
                        <svg v-show="!musicStore().currentMusic.isPlaying" id="play-music-icons" t="1755097642507"
                            class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="17098" width="200" height="200" @click="togglePlay">
                            <path
                                d="M512 853.333333c-187.733333 0-341.333333-153.6-341.333333-341.333333s153.6-341.333333 341.333333-341.333333 341.333333 153.6 341.333333 341.333333-153.6 341.333333-341.333333 341.333333z m0-85.333333c140.8 0 256-115.2 256-256s-115.2-256-256-256-256 115.2-256 256 115.2 256 256 256z m128-256l-213.333333 128V384l213.333333 128z"
                                fill="#444444" p-id="17099"></path>
                        </svg>
                        <svg v-show="musicStore().currentMusic.isPlaying" id="pause-music-icons" t="1755097669640"
                            class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="18083" width="200" height="200" @click="togglePlay">
                            <path
                                d="M624.941176 360.929882c-12.408471 0-22.528 13.432471-22.528 30.117647v301.176471c0 16.624941 10.119529 30.117647 22.528 30.117647h45.296942c12.408471 0 22.528-13.492706 22.528-30.117647v-301.176471c0-16.685176-10.119529-30.117647-22.528-30.117647h-45.296942z m-271.058823 0c-12.408471 0-22.528 13.432471-22.528 30.117647v301.176471c0 16.624941 10.119529 30.117647 22.528 30.117647h45.296941c12.408471 0 22.528-13.492706 22.528-30.117647v-301.176471c0-16.685176-10.119529-30.117647-22.528-30.117647h-45.296941z"
                                fill="#000000" p-id="18084"></path>
                            <path
                                d="M250.036706 138.059294a141.673412 141.673412 0 0 0-141.552941 141.552941v524.047059a141.673412 141.673412 0 0 0 141.552941 141.552941h524.047059a141.673412 141.673412 0 0 0 141.552941-141.552941v-524.047059a141.673412 141.673412 0 0 0-141.552941-141.552941h-524.047059z m524.047059 885.458824h-524.047059a220.099765 220.099765 0 0 1-219.858824-219.858824v-524.047059a220.099765 220.099765 0 0 1 219.858824-219.858823h524.047059a220.099765 220.099765 0 0 1 219.858823 219.858823v524.047059a220.099765 220.099765 0 0 1-219.858823 219.858824z"
                                fill="#060101" p-id="18085"></path>
                        </svg>
                        <svg id="next-music-icons" t="1755129135354" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="13049" width="200" height="200"
                            @click="playNextMusic">
                            <path
                                d="M860.16 92.16A71.68 71.68 0 0 1 931.84 163.84v696.32a71.68 71.68 0 0 1-71.68 71.68H163.84A71.68 71.68 0 0 1 92.16 860.16V163.84A71.68 71.68 0 0 1 163.84 92.16h696.32M860.16 40.96H163.84a122.88 122.88 0 0 0-122.88 122.88v696.32a122.88 122.88 0 0 0 122.88 122.88h696.32a122.88 122.88 0 0 0 122.88-122.88V163.84a122.88 122.88 0 0 0-122.88-122.88z"
                                fill="none" p-id="13050"></path>
                            <path
                                d="M349.5936 338.5344a30.3104 30.3104 0 0 1 17.6128 5.9392l200.0896 143.36a30.72 30.72 0 0 1 0 49.9712l-200.0896 143.36a30.3104 30.3104 0 0 1-17.6128 5.9392A30.72 30.72 0 0 1 318.6688 655.36V368.64a30.72 30.72 0 0 1 30.9248-30.9248m0-51.2a81.92 81.92 0 0 0-81.92 81.92V655.36a81.92 81.92 0 0 0 81.92 81.92 81.92 81.92 0 0 0 47.3088-15.36l200.0896-143.36a81.92 81.92 0 0 0 0-133.5296l-200.0896-143.36a81.92 81.92 0 0 0-47.3088-14.9504zM715.5712 714.9568a25.6 25.6 0 0 1-25.6-25.6V334.6432a25.6 25.6 0 0 1 51.2 0v354.7136a25.6 25.6 0 0 1-25.6 25.6z"
                                fill="#282828" p-id="13051"></path>
                        </svg>
                    </div>
                </div>
                <!-- 进度条 -->
                <div class="music-progress-bar">
                    <!-- <input type="range" min="0" :max="musicStore().currentMusic.duration"
                            @input="handleSeek($event)" @change="handleSeekEnd($event)"> -->
                    <el-slider v-model="musicStore().currentMusic.currentTime" @input="handleSeek"
                        @change="handleSeekEnd" />
                    <!-- 调节音量 -->
                    <svg id="music-volume-icons" t="1755178054831" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5540" width="200" height="200"
                        @click="isVolume = !isVolume">
                        <path
                            d="M308.971 657.987l150.28 165.279a16 16 0 0 0 11.838 5.236c8.837 0 16-7.163 16-16v-600.67a16 16 0 0 0-5.236-11.839c-6.538-5.944-16.657-5.463-22.602 1.075l-150.28 165.279A112 112 0 0 1 226.105 403H177c-17.673 0-32 14.327-32 32v154.333c0 17.674 14.327 32 32 32h49.105a112 112 0 0 1 82.866 36.654zM177 701.333c-61.856 0-112-50.144-112-112V435c0-61.856 50.144-112 112-112h49.105a32 32 0 0 0 23.676-10.472l150.28-165.28c35.668-39.227 96.383-42.113 135.61-6.445a96 96 0 0 1 31.418 71.028v600.671c0 53.02-42.98 96-96 96a96 96 0 0 1-71.029-31.417l-150.28-165.28a32 32 0 0 0-23.675-10.472H177z m456.058-348.336c-18.47-12.118-23.621-36.915-11.503-55.386 12.118-18.471 36.916-23.621 55.387-11.503C752.495 335.675 799 419.908 799 512c0 92.093-46.505 176.325-122.058 225.892-18.471 12.118-43.269 6.968-55.387-11.503-12.118-18.471-6.968-43.268 11.503-55.386C686.303 636.07 719 576.848 719 512c0-64.848-32.697-124.07-85.942-159.003z m92.93-137.323c-18.07-12.71-22.415-37.66-9.706-55.73s37.66-22.415 55.73-9.706C888.942 232.478 960 366.298 960 512s-71.058 279.522-187.988 361.762c-18.07 12.71-43.021 8.364-55.73-9.706-12.709-18.07-8.363-43.02 9.706-55.73C821.838 740.912 880 631.38 880 512c0-119.38-58.161-228.912-154.012-296.326z"
                            fill="#333333" p-id="5541"></path>
                    </svg>
                    <div id="volume-slider" v-show="isVolume">
                        <n-slider v-model:value="musicStore().currentMusic.volume" vertical :tooltip="false"
                            @update:value="handleVolumeChange" />
                        <div id="info">
                            <span style="margin-left: 6px;">{{ musicStore().currentMusic.volume }}</span>
                            <svg id="music-volume-icons" style="margin-left: 4px;" t="1755178787186" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5694"
                                width="200" height="200">
                                <path
                                    d="M605.6 929.8c-35.7 0-74.8-21-123.1-66.2-37.4-35-74.4-78.9-107-117.6-19.3-23-37.8-44.9-52.5-60.2H173.4c-25 0-45.3-21.8-45.3-48.6V400.5c0-26.8 20.3-48.5 45.3-48.5 16.6 0 30 13.4 30 30 0 11.2-6.2 21-15.3 26.2v217.5h159.2l8.7 8.3c18.2 17.3 40 43.2 65.3 73.3 31.5 37.4 67.3 79.9 102.1 112.5 44.2 41.3 69 50 82 50.1h8.8c1 0 1.9-0.1 2.7-0.2l-0.3-718.2c-0.8-0.1-1.7-0.2-2.8-0.2h-8.7c-23.5 0-54.6 18.3-92.4 54.4-36.7 35.1-73.2 80.5-105.3 120.7-25.4 31.7-47.3 59.1-66 77.3-11.9 11.6-30.9 11.3-42.4-0.6-11.6-11.9-11.3-30.9 0.6-42.4 16-15.6 37.9-42.9 61-71.8 33.3-41.6 71.1-88.7 110.7-126.5 50.1-47.8 93.8-71 133.8-71h8.7c35.2 0 62.8 22.6 62.8 51.4l0.3 735.8c-0.1 28.9-27.6 51.4-62.7 51.4l-8.6-0.2zM724.3 636.2c-10.3 0-20.3-5.3-25.9-14.8-8.4-14.3-3.7-32.7 10.6-41.1 22.1-13.1 35.9-37.5 35.9-63.7 0-26.2-13.7-50.7-35.9-63.7-14.3-8.4-19-26.8-10.5-41.1 8.4-14.3 26.8-19 41.1-10.5 40.3 23.8 65.3 68 65.3 115.4 0 47.4-25 91.6-65.3 115.4-4.9 2.7-10.1 4.1-15.3 4.1z"
                                    fill="#1D1D1D" p-id="5695"></path>
                                <path
                                    d="M751.6 745.7c-10.9 0-21.4-6-26.7-16.4-7.5-14.8-1.7-32.8 13.1-40.4 59.5-30.4 97.9-97.7 97.9-171.5S797.5 376.3 738 345.9c-14.8-7.5-20.6-25.6-13.1-40.4 7.5-14.8 25.6-20.6 40.4-13.1 38.7 19.8 71.5 51.1 94.7 90.5 23.5 40 36 86.5 36 134.4 0 47.9-12.4 94.3-36 134.4-23.2 39.4-55.9 70.8-94.6 90.5-4.5 2.5-9.2 3.5-13.8 3.5z"
                                    fill="#1D1D1D" p-id="5696"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <!-- 显示歌词、点点爱心 -->
                <div class="music-tail-btns flex items-center justify-evenly">
                    <svg id="music-like-icons" t="1755098280099" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="21907" width="200" height="200">
                        <path
                            d="M513.604267 200.362667l-1.604267 1.621333-1.604267-1.621333C426.717867 115.729067 297.642667 93.969067 198.144 152.029867c-148.855467 86.869333-173.329067 288.597333-55.3472 407.944533l320.6656 324.317867a68.266667 68.266667 0 0 0 93.7984 3.1232l3.140267-2.986667 320.802133-324.4544c117.981867-119.3472 93.525333-321.0752-55.3472-407.944533-99.498667-58.0608-228.573867-36.3008-312.251733 48.3328z m282.436266 13.397333c105.9328 65.621333 122.282667 211.5584 36.625067 298.222933L512 836.266667 191.3344 511.965867c-86.869333-87.893333-68.8128-236.765867 41.216-300.970667 71.68-41.8304 166.8608-25.770667 229.307733 37.376l25.873067 26.1632a34.133333 34.133333 0 0 0 48.5376 0l25.873067-26.1632c62.446933-63.146667 157.627733-79.2064 229.307733-37.376l4.590933 2.7648z"
                            fill="#444444" p-id="21908"></path>
                        <path
                            d="M312.797867 401.066667l156.893866 156.8768-48.2816 48.2816-156.8768-156.893867a34.133333 34.133333 0 1 1 48.264534-48.264533z"
                            fill="#00B386" p-id="21909"></path>
                    </svg>
                    <svg id="music-lyrics-icons" t="1755098265295" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="20904" width="200" height="200"
                        @click="showLyrics = true">
                        <path
                            d="M851.437037 254.103704L580.266667 98.607407c-36.02963-20.859259-94.814815-20.859259-130.844445 0L180.148148 254.103704c-36.02963 20.859259-66.37037 72.059259-66.37037 113.777777v309.096297c0 41.718519 30.340741 92.918519 66.37037 113.777778l269.274074 155.496296c36.02963 20.859259 94.814815 20.859259 130.844445 0l269.274074-155.496296c36.02963-20.859259 66.37037-72.059259 66.37037-113.777778V367.881481c0-43.614815-28.444444-92.918519-64.474074-113.777777z m26.548148 420.977777c0 28.444444-22.755556 66.37037-47.407407 81.540741L561.303704 910.222222c-24.651852 13.274074-70.162963 13.274074-94.814815 0l-269.274074-155.496296C174.459259 741.451852 151.703704 703.525926 151.703704 675.081481V367.881481c0-28.444444 22.755556-66.37037 47.407407-81.54074L468.385185 132.740741c24.651852-13.274074 70.162963-13.274074 94.814815 0l269.274074 155.496296c24.651852 13.274074 47.407407 53.096296 47.407407 81.540741v305.303703z"
                            p-id="20905"></path>
                        <path
                            d="M458.903704 411.496296h189.629629v34.133334h-189.629629zM405.807407 403.911111l24.651852-24.651852c-22.755556-26.548148-51.2-51.2-83.437037-75.851852L322.37037 328.059259c34.133333 26.548148 62.577778 51.2 83.437037 75.851852zM392.533333 665.6V449.422222h-106.192592v34.133334h72.059259v195.318518c0 7.585185-3.792593 15.17037-11.377778 20.859259l13.274074 32.237037c30.340741-20.859259 58.785185-47.407407 87.22963-75.851851l-9.481482-37.925926c-15.17037 18.962963-30.340741 34.133333-45.511111 47.407407zM629.57037 498.725926h-153.6v153.6h153.6v-153.6z m-34.133333 121.362963h-85.333333V530.962963h85.333333v89.125926z"
                            p-id="20906"></path>
                        <path
                            d="M447.525926 352.711111H682.666667v335.644445c0 17.066667-7.585185 26.548148-24.651852 26.548148l-58.785185-1.896297 9.481481 34.133334h56.888889c34.133333 0 53.096296-17.066667 53.096296-49.303704v-379.259259H447.525926v34.133333z"
                            p-id="20907"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- 显示歌词信息的el-drawer -->
    <el-drawer v-model="showLyrics" direction="btt" close-on-press-escape size="100%" :with-header="false">
        <!-- 自定义头部信息 -->
        <div class="custom-drawer-header">
            <svg id="drawer-close-icons" t="1755180758383" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="7496" width="200" height="200" @click="showLyrics = false">
                <path
                    d="M563.626667 512l155.306666 155.093333a36.693333 36.693333 0 0 1-51.84 51.84L512 563.626667l-155.093333 155.306666a36.693333 36.693333 0 0 1-51.84-51.84L460.373333 512l-155.306666-155.093333a36.693333 36.693333 0 0 1 51.84-51.84L512 460.373333l155.093333-155.306666a36.693333 36.693333 0 0 1 51.84 51.84z m-490.666667 0A438.826667 438.826667 0 1 0 512 73.173333 438.826667 438.826667 0 0 0 73.173333 512zM0 512a512 512 0 1 1 512 512A512 512 0 0 1 0 512z"
                    fill="#040000" p-id="7497"></path>
            </svg>
            <!-- 歌曲基本信息、歌名、歌手 -->
            <div id="music-basic-info">
                <p>{{ musicStore().currentMusic.music_name }} - {{ musicStore().currentMusic.singer }}</p>
            </div>
        </div>
        <!-- 音乐歌词信息 -->
        <div class="music-lyrics-info">
            <LyricsRender />
        </div>
    </el-drawer>


</template>



<script setup lang="ts">
import {
    getMusicInfoList, handleSeek, handleSeekEnd, handleVolumeChange, initAudio, initDB, leftNavigationmenus,
    moreMusicInfo, musicType, playMusic, playNextMusic, playPreviousMusic, togglePlay, userSelect
} from '@/components/General/Music/music';
import { musicStore } from '@/store/musicStore';
import { addLikeMusic, getMusicLyrics, getUserLikeList, randomMusic } from '@/utils/axiosApi';
import { ElMessage } from 'element-plus';
import { onMounted, onUnmounted, ref, watch, watchEffect } from 'vue';
import '@lrc-player/core/dist/style.css' // 引入样式
import LyricsRender from "@/factories/Lyrics/parseLyrics.vue"

const music_store = musicStore();

const emits = defineEmits(['child-click'])


const showLyrics = ref<boolean>(false);

const isFloatingBallVisible = ref<boolean>(false);

const activeMenuItem = ref<string>("list");

// 控制展示volume slider
const isVolume = ref<boolean>(false);

// 切换悬浮球状态
const toggleFloatingBall = () => {
    const newState = !isFloatingBallVisible.value;
    isFloatingBallVisible.value = newState;
    window.electronAPI.toggleFloatingBall(newState);
};

// 获取悬浮球状态
async function updateFloatingBallState() {
    isFloatingBallVisible.value = await window.electronAPI.getFloatingBallState();
}


watch(showLyrics, async (newShow: boolean, oldShow: boolean) => {
    if (newShow) {
        // 网络请求获取歌词
        musicStore().lyricContent = await getMusicLyrics(musicStore().currentMusic.music_key);
        // 解析歌词
        if (musicStore().lyricContent && musicStore().lyricContent != undefined) {
            const lrc = parseLyrics(musicStore().lyricContent!);
            // 确保容器存在
            const container = document.getElementById('lrc-player');
            if (!container) {
                throw new Error('歌词容器未找到');
            }
            // 清空容器，防止重复初始化
            container.innerHTML = '';
            // 解析歌词之后初始化播放器
        } else {
            ElMessage.warning("无法解析歌词，歌词加载失败!");
        }
    }

})


// 解析LRC歌词
const parseLyrics = (lrcText: string) => {
    const lines = lrcText.split('\n');
    const lyrics = [];

    for (const line of lines) {
        // 匹配时间标签 [mm:ss.xx]
        const timeMatches = line.match(/\[(\d+):(\d+)\.(\d+)\]/g);
        if (!timeMatches) continue;

        // 获取歌词内容（去掉时间标签后的部分）
        const text = line.replace(/\[.*?\]/g, '').trim();

        // 处理每个时间标签
        for (const timeTag of timeMatches) {
            const timeMatch = timeTag.match(/\[(\d+):(\d+)\.(\d+)\]/);
            if (!timeMatch) continue;

            const minutes = parseInt(timeMatch[1]);
            const seconds = parseInt(timeMatch[2]);
            const milliseconds = parseInt(timeMatch[3]);

            // 计算总时间（毫秒）
            const time = minutes * 60 * 1000 + seconds * 1000 + milliseconds * 10;

            lyrics.push({
                time,
                text
            });
        }
    }

    // 按时间排序
    lyrics.sort((a, b) => a.time - b.time);

    return lyrics;
};





onMounted((): void => {
    setTimeout(() => {
        getMusicInfoList();
    }, 20);
    // 获取音乐播放状态
    if (musicStore().currentMusic.isPlaying) {
        musicStore().currentMusic.isPlaying = false;
    }
    // 初始化时检查悬浮球状态
    updateFloatingBallState();
    // 初始化IndexedDB
    initDB()
    // 初始化Audio
    initAudio()
    setTimeout(async (): Promise<void> => {
        await getUserLikeList();
    }, 200);
})


</script>




<style scoped lang="scss">
@import url("./music.scss");
</style>